<template>
	<view style="width: 100%;height: 100%;background-color: #fafafa;">
		<view style="width: 100%;background-color: #fff;padding-top: 30rpx;padding-bottom: 30rpx;">
			<view
				style="width: 710rpx;display: flex;flex-direction: row;justify-content: space-between;padding-left: 20rpx;padding-top: 10rpx;">
				<view style="color: #000;font-size: 38rpx;font-weight: 700;">{{louPanJSON.land_name}}</view>
				<view style="color: #c86200;font-size: 28rpx;">快速网签查询</view>
			</view>

			<view
				style="width: 710rpx;display: flex;flex-direction: row;justify-content: space-between;padding-left: 20rpx;padding-top: 10rpx;">
				<view style="color: #ff0000;font-size: 28rpx;font-weight: 700;">{{louPanJSON.occupation_extent}}
				</view>
				<view style="color: #ff0000;font-size: 28rpx;font-weight: 700;">{{louPanJSON.total_price}}</view>
			</view>
		</view>

		<!-- 规划详情 -->
		<view style="width: 730rpx;margin: 10rpx;border-radius: 10rpx;">
			<view style="font-size: 30rpx;font-weight: 700;color: #000;margin-left: 15rpx;">规划详情</view>

			<view style="margin-top: 20rpx; margin-left: 15rpx;">1.户型分布图</view>
			<!-- <image :src="louPanJSON.unit_type" style="width: 710rpx;"></image> -->
			<image :src="'https://fcc.sdyilian.top'+louPanJSON.unit_type"
				style="width: 700rpx; border-radius: 10rpx;margin: 15rpx;"></image>
			<view style="margin-top: 20rpx; margin-left: 15rpx;">2.楼盘规划图</view>
			<view style="width: 700rpx; border-radius: 10rpx;margin: 15rpx;">
				<image :src="'https://fcc.sdyilian.top'+louPanJSON.planning_image" @click="chaKanGuiHua()"
					style="width: 700rpx; border-radius: 10rpx;z-index:1; position: absolute;height: 430rpx;">
				</image>
				<view style="width: 700rpx; border-radius: 10rpx;z-index:2; position: absolute;height: 430rpx;
				display: flex;flex-direction: row;align-items: center;justify-content: center;" @click="chaKanGuiHua()">
					<image src="../../../static/zft.png" style="width: 150rpx;height: 150rpx;"></image>
				</view>

			</view>

		</view>

		<!-- 户型VR -->
		<!-- <view style="width: 730rpx;margin: 10rpx;border-radius: 10rpx;">
			<view style="font-size: 30rpx;font-weight: 700;color: #000;margin-left: 15rpx;">户型VR</view>
			
			<view style="margin-top: 20rpx; margin-left: 15rpx;">1.户型分布图</view>
			<image src="../../../static/lbt.png" style="width: 700rpx; border-radius: 10rpx;margin: 15rpx;" ></image>
			<view  style="margin-top: 20rpx; margin-left: 15rpx;">2.楼盘规划图</view>
			
		</view> -->

		<!-- 工程进度 -->
		<view style="height: 430rpx;"></view>
		<!-- <view style="width: 730rpx;margin: 10rpx;border-radius: 10rpx;">
			<view style="font-size: 30rpx;font-weight: 700;color: #000;margin-left: 15rpx;margin-top: 40rpx;"
				@click="chaKan720()">查看进度</view>
		</view> -->



		<view style="width: 100%;padding-left: 20rpx;margin-top: 10rpx;
		padding-right: 20rpx;display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
			<view style="font-size: 30rpx;color: #333333;font-weight: 600;">
				为您推荐优秀置业顾问和经纪人
			</view>
		</view>

		<view style="display: flex;flex-direction: row;width: auto;width: 100%; flex-wrap: wrap; ">

			<view style="width: 250rpx;display: flex;flex-direction: row;justify-content: center;"
				v-for="(item,index) in guWenList">
				<view style="width: 80%;margin: 10%;background-color: #fff;border-radius: 20rpx;border: 1rpx solid #999999;
						display: flex;flex-direction: column;justify-content: center;align-items:center;
						padding: 15rpx;">
					<image :src="'https://fcc.sdyilian.top/'+item.head"
						style="width: 80rpx;height: 80rpx;border-radius: 40rpx;"></image>
					<view style="margin-top: 10rpx;">{{item.name}}</view>
					<view style="margin-top: 10rpx;color: #999999;font-size: 20rpx;">{{item.explain}}</view>
					<view style="margin-top: 10rpx;color: #fff;background-color: #ff0000;height: 40rpx;
					font-size: 25rpx;line-height: 40rpx;padding-left: 30rpx;padding-right: 30rpx;">立即咨询</view>
				</view>
			</view>
		</view>

		<view style="width: 680rpx;margin: 15rpx;border-radius: 20rpx;border: 1rpx solid #ff0000;padding: 20rpx;
		background-color: #fff;">
			<view>
				<view style="font-size: 30rpx;font-weight: 700;color: #000;">房源及价格</view>
			</view>
			<view style="width: 150rpx;border-radius: 8rpx;border: 1rpx solid #ff0000;padding: 15rpx;margin-top: 30rpx;
			color: #ff0000;text-align: center;" @click="getDanYuanList(louDongList[0].id)">
				{{louDongList[0].title}}#
			</view>
			<view style="width: 100%;display: flex;flex-direction: row;flex-wrap: wrap;margin-top: 15rpx;">
				<view style="width: 30%;padding:20rpx;text-align: center;"
					:class="danYuanIndex==index?'danYuan_lan':'danYuan_hui'" v-for="(item,index) in danYuanList"
					@click="xuanZhongDanYuan(index)">
					{{item.unit}}单元
				</view>
			</view>
			<view style="width: 650rpx;margin-left: 3rpx;border: 1rpx solid #eeeeee;">
				<view style="width:650rpx;display: flex;flex-direction: row;"
					:class="(index+1)%2==0?'fangJian_hui':'fangJian_bai'" v-for="(item,index) in fangJianList">
					<view style="width: 20%;font-size: 30rpx;text-align: center;height: 60rpx; line-height: 60rpx;">
						{{item.floor}}层
					</view>

					<view style="border-left: 1rpx solid #999999;width: 40%;font-size: 30rpx;height: 60rpx; line-height: 60rpx;
					border-right: 1rpx solid #999999;text-align: left;">
						<view v-if="item.room[0].title!=undefined && item.room[0].title!=''">
							<view v-if="item.room[0].state=='未出售'" style="display: flex;flex-direction: row;margin-left: 30rpx;
							">
								<view style="color: #000;font-size: 30rpx;">{{item.room[0].title}}</view>
								<view style="color: #cacaca;font-size: 22rpx;margin-left: 10rpx;margin-top: 3rpx;">
									{{item.room[0].extent}}m²</view>
							</view>
							<view v-else style="display: flex;flex-direction: row;">
								<view style="color: #000;font-size: 30rpx;">{{item.room[0].title}}</view>
								<view style="color: #ff0000;font-size: 22rpx;;margin-left: 10rpx;">
									({{item.room[0].signing}})</view>
							</view>
						</view>
					</view>

					<view style="width: 40%;font-size: 30rpx;text-align: left;height: 60rpx; line-height: 60rpx;">
						<view v-if="item.room[1].title!=undefined && item.room[1].title!=''">
							<view v-if="item.room[1].state=='未出售'" style="display: flex;flex-direction: row;margin-left: 30rpx;
							">
								<view style="color: #000;font-size: 30rpx;">{{item.room[1].title}}</view>
								<view style="color: #cacaca;font-size: 22rpx;margin-left: 10rpx;margin-top: 3rpx;">
									{{item.room[1].extent}}m²</view>
							</view>
							<view v-else style="display: flex;flex-direction: row;">
								<view style="color: #000;font-size: 30rpx;">{{item.room[1].title}}</view>
								<view style="color: #ff0000;font-size: 22rpx;margin-left: 10rpx;">
									({{item.room[1].signing}})</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view style="height: 10rpx;"></view>
		<view style="width: 680rpx;margin: 15rpx;border-radius: 20rpx;padding: 20rpx; height: 360rpx;
		background-color: #fff;">
			<view style="font-size: 30rpx;font-weight: 700;color: #000;">区位介绍</view>
			<map scale="14" id="map"
				style="width: 100%; height: 100%;margin-top: 10rpx;border-radius: 20rpx;height: 300rpx;"
				:latitude="latitude" :longitude="longitude" :markers="markers" :enable-poi="true">
			</map>
		</view>

		<view style="height: 10rpx;"></view>

		<view style="width: 680rpx;margin: 15rpx;border-radius: 20rpx;padding: 20rpx;
		background-color: #fff;">
			<view style="font-size: 30rpx;font-weight: 700;color: #000;">楼盘信息</view>
			<view style="width: 670rpx; margin: 5rpx;border-radius: 10rpx;">
				<view style="width: 670rpx;background-color: #ff0000;height: 60rpx;line-height: 60rpx; border-top-left-radius: 10rpx;
					border-top-right-radius: 10rpx;margin-top: 10rpx;
					display: flex;flex-direction: row;">
					<view style="color: #fff;font-size: 25rpx;margin-left:5% ;width: 39%;font-weight: 700;">土地名称</view>
					<view style="color: #fff;font-size: 25rpx;width: 18%;font-weight: 700;">土地面积</view>
					<view style="color: #fff;font-size: 25rpx;width: 18%;font-weight: 700;">楼面地价</view>
					<view style="color: #fff;font-size: 25rpx;width: 18%;margin-right: 2%;font-weight: 700;">溢价率</view>
				</view>

				<view style="width: 670rpx;background-color: #f6f7fb;line-height: 60rpx;
					display: flex;flex-direction: row; border-bottom-left-radius: 10rpx;
					border-bottom-right-radius: 10rpx;">
					<view style="color: #000;font-size: 20rpx;margin-left:5% ;width: 39%;">{{louPanJSON.land_name}}
					</view>
					<view style="color: #000;font-size: 20rpx;width: 18%;margin:5rpx;">{{louPanJSON.land_extent}}m²
					</view>
					<view style="color: #000;font-size: 20rpx;width: 18%;margin:5rpx;">{{louPanJSON.land_price}}/m²
					</view>
					<view style="color: #000;font-size: 20rpx;width: 18%;margin-right: 2%;margin-left: 5rpx;">
						{{louPanJSON.premium}}%</view>
				</view>

			</view>

			<view style="width: 680rpx;padding: 5rpx;">
				<view style="width: 100%;height: 50rpx;line-height: 50rpx;display: flex;">
					<view style="width: 120rpx;font-size: 25rpx;color: #999999;">开发公司:</view>
					<view style="font-size: 25rpx;color: #000;">{{louPanJSON.development_company}}</view>
				</view>
				<view style="width: 100%;height: 50rpx;line-height: 50rpx;display: flex;">
					<view style="width: 120rpx;font-size: 25rpx;color: #999999;">项目位置:</view>
					<view style="font-size: 25rpx;color: #000;">{{louPanJSON.address}}</view>
				</view>

				<view style="width: 100%;display: flex;flex-direction: row;">
					<view style="width: 50%;height: 50rpx;line-height: 50rpx;display: flex;">
						<view style="width: 120rpx;font-size: 25rpx;color: #999999;">占地面积:</view>
						<view style="font-size: 25rpx;color: #000;">{{louPanJSON.land_extent}}m²</view>
					</view>

					<view style="width: 50%;height: 50rpx;line-height: 50rpx;display: flex;">
						<view style="width: 120rpx;font-size: 25rpx;color: #999999;">建筑面积:</view>
						<view style="font-size: 25rpx;color: #000;">{{louPanJSON.building_extent}}</view>
					</view>
				</view>

				<view style="width: 100%;display: flex;flex-direction: row;">
					<view style="width: 50%;height: 50rpx;line-height: 50rpx;display: flex;">
						<view style="width: 120rpx;font-size: 25rpx;color: #999999;">楼栋总数:</view>
						<view style="font-size: 25rpx;color: #000;">{{louPanJSON.building_num}}</view>
					</view>

					<view style="width: 50%;height: 50rpx;line-height: 50rpx;display: flex;">
						<view style="width: 120rpx;font-size: 25rpx;color: #999999;">总户数量:</view>
						<view style="font-size: 25rpx;color: #000;">{{louPanJSON.household_num}}</view>
					</view>
				</view>

				<view style="width: 100%;display: flex;flex-direction: row;">
					<view style="width: 50%;height: 50rpx;line-height: 50rpx;display: flex;">
						<view style="width: 120rpx;font-size: 25rpx;color: #999999;">装修标准:</view>
						<view style="font-size: 25rpx;color: #000;">{{louPanJSON.decoration_id}}</view>
					</view>

					<view style="width: 50%;height: 50rpx;line-height: 50rpx;display: flex;">
						<view style="width: 120rpx;font-size: 25rpx;color: #999999;">车位数量:</view>
						<view style="font-size: 25rpx;color: #000;">{{louPanJSON.parking_space}}</view>
					</view>
				</view>


				<view style="width: 100%;display: flex;flex-direction: row;">
					<view style="width: 50%;height: 50rpx;line-height: 50rpx;display: flex;">
						<view style="width: 120rpx;font-size: 25rpx;color: #999999;">容积率:</view>
						<view style="font-size: 25rpx;color: #000;">{{louPanJSON.area_ratio}}</view>
					</view>

					<view style="width: 50%;height: 50rpx;line-height: 50rpx;display: flex;">
						<view style="width: 120rpx;font-size: 25rpx;color: #999999;">车位配比:</view>
						<view style="font-size: 25rpx;color: #000;">{{louPanJSON.parking_space_proportioning}}</view>
					</view>
				</view>


				<view style="width: 100%;display: flex;flex-direction: row;">
					<view style="width: 120rpx;font-size: 25rpx;color: #999999;">物业公司:</view>
					<view style="font-size: 25rpx;color: #000;">{{louPanJSON.property}}</view>

				</view>

				<view style="width: 100%;display: flex;flex-direction: row;">


					<view style="width: 50%;height: 50rpx;line-height: 50rpx;display: flex;">
						<view style="width: 120rpx;font-size: 25rpx;color: #999999;">绿化率:</view>
						<view style="font-size: 25rpx;color: #000;">{{louPanJSON.green_ratio}}</view>
					</view>


					<view style="width: 50%;height: 50rpx;line-height: 50rpx;display: flex;">
						<view style="width: 120rpx;font-size: 25rpx;color: #999999;">交房时间:</view>
						<view style="font-size: 25rpx;color: #000;">{{louPanJSON.delivertime}}</view>
					</view>

				</view>
			</view>
		</view>



		<view style="width: 680rpx;margin: 15rpx;border-radius: 20rpx;padding: 20rpx;
		background-color: #fff;">
			<view style="width: 100%;display: flex;flex-direction: row;justify-content: space-between;">
				<view style="font-size: 30rpx;font-weight: 700;color: #000;">用户评论</view>
				<view style="font-size: 25rpx;color: #999999;" @click="gengDuoPingLun">
					查看更多>
				</view>
			</view>
			<scroll-view scroll-y="true" style="width: 100%;height: 600rpx;">
				<view style="width: 100%;display: flex;flex-direction: row;margin-top: 20rpx; height: 150rpx;
				border-bottom: 1rpx solid #e5e5e5;align-items: center;" v-for="(item,index) in pingLunList">
					<view>
						<image :src="'https://fcc.sdyilian.top/'+item.user.photo"
							style="width: 70rpx;width: 70rpx;border-radius: 35rpx;"></image>
							
							<!-- <image src="../../../static/pl.png"
								style="width: 70rpx;height: 70rpx;border-radius: 50rpx;"></image> -->
					</view>
					<view style="display:flex;flex-direction: column;margin-left: 10rpx;">
						<view style="font-size: 27rpx;font-weight: 700;">{{item.user.nickname}}</view>
						<view style="font-size: 29rpx;">{{item.create_time}}</view>
						<view style="font-size: 27rpx;">{{item.content}}</view>
					</view>
				</view>
			</scroll-view>


		</view>





		<view style="height: 120rpx;"></view>

		<view style="position: fixed;bottom: 0;width: 100%;height: 100rpx;background-color: #fff;display: flex;flex-direction: row;
		align-items: center;">
			<view style="display: flex;flex-direction: column;width: 20%;align-items: center;" @click="gengDuoPingLun">
				<image src="../../../static/pl.png" style="width: 40rpx;height: 40rpx;"></image>
				<view style="margin-top: 5rpx;">评论</view>
			</view>
			<view style="display: flex;flex-direction: column;width: 20%;align-items: center;">
				<image src="../../../static/guanzhu.png" style="width: 40rpx;height: 40rpx;"></image>
				<view style="margin-top: 5rpx;">关注</view>
			</view>
			<view style="width: 30%;">
				<view style="background-color: #e21c1c;border-radius: 10rpx;display: flex;flex-direction: row;
				justify-content: center;align-items: center;width: 70%;padding: 5rpx;height: 70rpx;">
					<view style="color: #fff;font-weight: 900;font-size: 40rpx;
					font-style: italic;">PK</view>
					<view style="display: flex;flex-direction: column;color: #fff;font-size: 24rpx;
					margin-left: 20rpx;">
						<view>楼盘</view>
						<view>对比</view>
					</view>
				</view>

			</view>

			<view style="width: 30%;">
				<view style="background-color: #e21c1c;border-radius: 10rpx;display: flex;flex-direction: row;
				justify-content: center;align-items: center;width: 70%;padding: 5rpx;height: 70rpx;">
					<view style="color: #fff;font-weight: 700;font-size: 27rpx;
					">联系客服</view>

				</view>

			</view>

		</view>
	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				louPanId: "",
				louPanJSON: {},
				guWenList: [],
				louDongList: [],
				danYuanList: [],
				danYuanIndex: 0,
				fangJianList: [],
				type: -1,
				longitude: 0.0,
				latitude: 0.0,
				markers: [],
				pingLunList: []

			}
		},
		onLoad(e) {

			that = this;
			that.type = e.type;
			that.louPanId = e.id;
			that.getLouPanXiangQing();
			that.getGuWenList();
			that.getLouDongList();
		},
		onShow() {
			if( that.louPanId!=""){
				that.getPingLunList();
			}
		},
		methods: {
			gengDuoPingLun(){
				uni.navigateTo({
					url:'yongHuPingLun?louPanId='+that.louPanId+'&type='+that.type
				})
			},
			chaKan720() {
				uni.navigateTo({
					url: '/pages/k720/k720?url=' + that.louPanJSON.engineering_progress
				})
			},
			chaKanGuiHua() {
				uni.navigateTo({
					url: '/pages/k720/k720?url=' + that.louPanJSON.planning
				})
			},
			getLouPanXiangQing() {
				var url = uni.api.API.info;
				var parm = {
					id: that.louPanId,
					type: that.type
				}
				uni.api.HTTPREQUEST(url, "get", parm,
					that.getLouPanXiangQingSuss,
					that.getLouPanXiangQingFail, 1);
			},
			getLouPanXiangQingSuss(res) {
				console.log("详情==", res)
				that.louPanJSON = res.data;
				that.latitude = that.louPanJSON.latitude;
				that.longitude = that.louPanJSON.longitude;
				that.markers.push({
					alpha: 0,
					height: 0,
					id: 0,
					latitude: that.louPanJSON.latitude,
					longitude: that.louPanJSON.longitude,
					width: 0,
					label: {
						content: that.louPanJSON.land_name,
						color: '#fff',
						fontSize: 15,
						borderRadius: 5,
						bgColor: '#038cff',
						padding: 5,
						textAlign: 'center'
					}

				});
				that.getVR();
				that.getPingLunList();
				// room_vr
			},
			getLouPanXiangQingFail(msg) {
				console.log(msg);
			},
			getVR() {
				var url = uni.api.API.room_vr;
				var parm = {
					id: that.louPanId,
					type: that.type
				}
				uni.api.HTTPREQUEST(url, "post", parm,
					that.getVRSuss,
					that.getVRFail, 1);
			},
			getVRSuss(res) {
				console.log("vr信息===", res);
			},
			getVRFail(msg) {
				console.log(msg);
			},
			getPingLunList(){
				var url = uni.api.API.comment_list;
				var parm = {
					id: that.louPanId,
					type: that.type,
					page:1
				}
				uni.api.HTTPREQUEST(url, "get", parm,
					that.getPingLunListSuss,
					that.getPingLunListFail, 1);
			},
			getPingLunListSuss(res){
				that.pingLunList=res.data.data;
			},
			getPingLunListFail(msg){
				console.log(msg)
			},
			getGuWenList() {
				var url = uni.api.API.adviser_list;
				var parm = {
					id: 2
				}
				uni.api.HTTPREQUEST(url, "get", parm,
					that.getGuWenListSuss,
					that.getGuWenListFail, 1);
			},
			getGuWenListSuss(res) {
				that.guWenList = res.data;

			},
			getGuWenListFail(msg) {
				console.log(msg);
			},
			getLouDongList() {
				var url = uni.api.API.unittype_list;
				var parm = {
					type: 1,
					id: that.louPanId
				}
				uni.api.HTTPREQUEST(url, "get", parm,
					that.getLouDongListSuss,
					that.getLouDongListFail, 1);
			},
			getLouDongListSuss(res) {
				that.louDongList = res.data;
				if (that.louDongList.length == 0) {
					that.louDongList = [{
						title: '暂无数据'
					}]
				}
				that.getDanYuanList(that.louDongList[0].id)

			},
			getLouDongListFail(msg) {
				console.log(msg)
			},
			getDanYuanList(id) {
				var url = uni.api.API.unit_list;
				var parm = {
					type: 1,
					id: id
				}
				uni.api.HTTPREQUEST(url, "get", parm,
					that.getDanYuanListSuss,
					that.getDanYuanListFail, 1);
			},
			getDanYuanListSuss(res) {
				that.danYuanList = res.data;
				if (that.danYuanList.length > 0) {
					that.xuanZhongDanYuan(0);
				}


			},
			getDanYuanListFail(msg) {
				console.log(msg);
			},
			xuanZhongDanYuan(index) {
				that.danYuanIndex = index;
				that.getFangJianList(that.danYuanList[index].id);
			},
			getFangJianList(id) {
				var url = uni.api.API.room_list;
				var parm = {
					unit: id
				}
				uni.api.HTTPREQUEST(url, "get", parm,
					that.getFangJianListSuss,
					that.getFangJianListFail, 1);
			},
			getFangJianListSuss(res) {
				that.fangJianList = res.data
				console.log("房间列表==", res);
			},
			getFangJianListFail(msg) {
				console.log(msg);
			}
		}
	}
</script>

<style>
	page {
		background-color: #f6f6f9;
	}

	.danYuan_lan {
		background-color: #dde4ff;
	}

	.danyuan_hui {
		background-color: #fff;
	}

	.fangJian_bai {
		background-color: #fff;
	}

	.fangJian_hui {
		background-color: #f6f6f9;
	}
</style>